<template>
  <div :class="['left_item_container',{'left_item_active':selectIndex===index?true:false}]"
  @click="onClick">
    <div class="left_item_title">{{title}}</div>
  </div>
</template>

<script>
export default {
  props:{
    item:Object,
    selectIndex:Number,
    index:Number
  },
  data(){
    return{
      title:this.item.cname
    }
  },
  methods:{
    onClick(){
      this.$store.dispatch("CHANGE_SELECT_STATUS",this.index);
      this.$emit("changeSelectindex");
    }
  }
}
</script>

<style scoped>
.left_item_container
{
  width: 100%;
  height: 50px;
  /* border: 1px solid black; */
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.left_item_active
{
  border-left: 2px solid red;
}
</style>